<!--
 * @Author: yan_hai_dong 891236760@qq.com
 * @Date: 2022-08-15 18:47:59
 * @LastEditors: yan_hai_dong 891236760@qq.com
 * @LastEditTime: 2022-08-17 14:29:59
 * @FilePath: \app\src\components\MyButton\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <button :class="{ 'my-button': true, loading }" @click="handClick">
    <slot>{{ text }}</slot>
    <div class="more"></div>
  </button>
</template>

<script>
export default {
  props: {
    loading: {
      default: false,
      type: Boolean,
    },
    text: {
      default: "",
      type: [Number, String],
    },
  },
  methods: {
    handClick() {
      this.$emit("click");
    },
  },
};
</script>

<style lang="less" scoped>
@baseColor: cadetblue; // 默认文字颜色
@bgbaseColor: #fff; // 默认背景色
@borderRadius: 4px; // 边框宽度
@paddingY: 10px; // 按钮Y方向边距
@minWidth: 100px;

.my-button {
  min-width: @minWidth;
  padding: @paddingY - @borderRadius / 2 0;
  border-radius: @borderRadius;
  background-color: @bgbaseColor;
  z-index: 1;
  color: @baseColor;
  border: @borderRadius / 2 solid @baseColor;
  cursor: pointer;
  font-size: 20px;

  .more {
    pointer-events: none;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(0, 0%, 100%, 0.35);
  }
  &:disabled {
    overflow: hidden;
    position: relative;
    cursor: not-allowed;
    .more {
      display: block;
    }
  }
  &.loading {
    overflow: hidden;
    position: relative;
    border: none;
    padding: @paddingY 0;
    pointer-events: none;
    .more {
      display: block;
    }
    &::before {
      content: "";
      position: absolute;
      background-color: @baseColor;
      width: 200%;
      height: 200%;
      z-index: -2;
      left: 50%;
      top: 50%;
      transform-origin: 0 0;
      animation: rotate 3s infinite linear;
    }
    &::after {
      content: "";
      position: absolute;
      background-color: @bgbaseColor;
      width: calc(100% - @borderRadius);
      height: calc(100% - @borderRadius);
      border-radius: @borderRadius;
      z-index: -1;
      top: @borderRadius / 2;
      left: @borderRadius / 2;
    }
  }

  @keyframes rotate {
    to {
      transform: rotate(1turn);
    }
  }
}
</style>